<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 数据绑定最常见的形式使用“Mustache”语法 (双大括号) 的文本插值： -->
        <!-- 当 vm 的相应 property 变化，插值处的内容都会更新 -->
        <p>{{ a }}</p>
        <!-- ------------------------------ -->
        <!-- 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。-->
        <p v-once>{{ b }}</p>
        <!-- ---------------------------- -->
        <!-- 为了输出真正的 HTML，需要使用 v-html 指令： -->
        <!-- p 的内容将会被替换成为 property 值 rawHtml -->
        <p v-html="rawHtml"></p>

        <!-- ---------------------------- -->
        <!-- 使用 JavaScript 表达式 -->
        {{ num + 1 }}
        {{ isOk ? 'Yes' : 'No'}}
        {{ mes.split('').reverse().join('') }}
        <div :id="'list-' + id">哈哈</div>

        <!-- 每个绑定都只能包含单个表达式，以下不会生效 -->
        <!-- 这是语句，不是表达式 -->
        {{ var a = 1 }}
        <!-- 流控制也不会生效，请使用三元表达式 -->
        {{ if (ok) { return message } }}
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                a: 'hi',
                b: 'haha',
                rawHtml: '',
                num: 2,
                isOk: true,
                mes: 'abcde',
                id: 1,
            }
        })

        vm.b = 'ohoh'

        vm.rawHtml = '<div>hahaha<span style="color:red">this is red</span></div>'

    </script>
</body>

</html>